<template>
  <div class="world">
    <h2>{{ msg }}</h2>
    <!-- 行内事件：将事件处理函数写在行内 -->
    <input type="button" value="按钮1" v-on:click="console.log(1)">
    <!-- v-on的简写 -->
    <input type="button" value="按钮2" @click="console.log(2)">
    <!-- 非行内事件：将事件处理函数写在methods选项内 -->
    <!-- methods选项：用来定义方法（函数） -->
    <input type="button" value="按钮3" @click="log">
    <!-- 绑定事件时，如果需要传参，可以在方法名后直接加小括号 -->
    <input type="button" value="按钮4" @click="log2('hi')">
    <!-- 在methods选项内定义的方法内的this指向当前vue实例 -->
    <!-- 可以通过this获取到其他方法或data中绑定的数据 -->
    <!-- 也可以通过this修改data中绑定的数据，可以触发视图的更新 -->
    <input type="button" value="按钮5" @click="change()">
    <!-- 因为this指向了vue实例，所以如果需要获取事件目标，必须要通过事件对象 -->
    <!-- 获取事件： -->
    <!-- 如果事件触发方法名后没有加小括号，在方法内的第一个参数就是事件对象 -->
    <input type="button" value="按钮6" @click="fn1">
    <!-- 如果事件触发方法名后有小括号，主动传入$event作为事件对象 -->
    <input type="button" value="按钮7" @click="fn2($event, 'hello', 'world', 123)">
  </div>
</template>

<script>
export default {
  name:"World",
  data(){
    return {
      msg: "事件的绑定"
    }
  },
  methods:{
    log(){
      console.log(3, this)
    },
    log2(v){
      console.log(v, this, this.msg);
    },
    change(){
      this.msg = "Event Bind";
    },
    fn1( event ){
      console.log( event );
      console.log( event.target );
    },
    fn2( event, b, c, d ){
      console.log( event );
      console.log( b );
      console.log( c );
      console.log( d );
    }
  }
}
</script>

<style>
</style>


<!-- 对象： -->
<!-- 属性：数据 -->
<!-- 方法：功能，函数 -->
